<script setup>
  import { onMounted, reactive, ref, computed, watch, nextTick } from 'vue';

  defineOptions({name: ''});
  const props = defineProps({})
  const emits = defineEmits(['on-ok']);
  onMounted(() => {});

  const flag = ref(false);
  const num = ref(0);
  const add = () => {
    num.value += 1;
  }

  // 子组件暴露
  defineExpose({});

</script>

<template>
  <div>
    <el-switch
      v-model="flag"
      inline-prompt
      size="large"
      active-text="开启防抖"
      inactive-text="关闭防抖"
    />
  </div>
  <el-input v-model="num" disabled style="width: 240px"/>
  <el-button type="primary" @click="add" v-if="!flag">点击 + 1</el-button>
  <el-button type="success" v-debounce="add" v-if="flag">1秒内重复点击仅 + 1</el-button>
  <div style="margin-top: 10px;">
    高级用法：
    <el-button type="primary">
      <span v-myPopover="{id: '124892749', placement: 'bottom'}">popover</span>
    </el-button>
  </div>
</template>

<style lang="less" scoped>

</style>
